<!DOCTYPE html>
<html lang="zh-cmn-Hans">
  <head>
    <meta charset="utf-8" />
    <meta http-equiv="X-UA-Compatible" content="IE=edge" />
    <meta name="viewport" content="width=device-width,initial-scale=1.0" />
    <title>丰收平台</title>
    <!-- <script src='./dist/bundle.cjs'></script> -->
  </head>

  <body>
    <div id="app">
      <div id="loader-wrapper">
        <div id="loader"></div>
    <div>

    </div>
    <script>
        function WbiokrDB(dbName = `DB-${window.location.host||'wbiokr'}`, version = 1, storeName = `STORE-${window.location.host || 'wbiokr'}`, keyPath = 'id') {
          let db;
          
          // const indexedDB = window.indexedDB;
          const indexedDB =window.indexedDB||window.webikitIndexedDB||window.mozIndexedDB||window.msIndexedDB;
          if (!indexedDB) return editDBData;
          
          const request = indexedDB.open(dbName, version);
          
          request.onsuccess = function(e) {
              db = e.target.result;
          };
          
          request.onerror = function(e) {
              console.error(e)
          };
          
          request.onupgradeneeded = function(e) {
              db = e.target.result;
              if (!db.objectStoreNames.contains(storeName)) {
                  db.createObjectStore(storeName, { keyPath})
              }
          };
          
          function update(keyPathValue, data) {
              return new Promise((result, reject) => {
                    if (typeof data !== 'object') {
                        reject(new Error('value仅支持对象'))
                        return
                    }
                    if (!Object.keys(data).includes(keyPath)) {
                        reject(new Error(`value没有${keyPath}字段`))
                        return
                    }
                  const request = db.transaction([storeName], 'readwrite')
                      .objectStore(storeName)
                      .put(data);
              
                  request.onsuccess = (event) => {
                      result(event)
                  }
              
                  request.onerror = (error) => {
                      reject(error)
                  }
              })
          }

          function searchAll() {
              return new Promise((resolve, reject)=>{
                  const request = db.transaction([storeName])
                      .objectStore(storeName)
                      .getAll();

                  request.onsuccess =()=>{
                      if (request.result) {
                          resolve(request.result)
                      } else {
                          reject('获取失败')
                      }
                  }

                  request.onerror =(err)=>{
                      reject(err)
                  }

              })
          }

          function search(keyPathValue) {
              return new Promise((resolve, reject)=>{
                  const request = db.transaction([storeName])
                      .objectStore(storeName)
                      .get(keyPathValue);

                  request.onsuccess =(e)=>{
                      if (request.result) {
                          resolve(request.result)
                      } else {
                          reject(null)
                      }
                  };

                  request.onerror = (err) =>{
                      reject(err)
                  };
              })
          }

          function editDBData(keyPathValue, data) {
              try {
                  if (arguments.length === 0) return searchAll();
                  if (arguments.length === 1) return search(keyPathValue);
                  if (arguments.length === 2) return update(keyPathValue, data);
                  return Promise.reject('参数有问题');
              } catch (error) {
                  return Promise.reject(error)   
              }
          }
          return editDBData;
        }
    </script>
  </body>
</html>
